<template>
    <div class="retailers_box">
        <!-- 搜索部分 -->

        <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
        <ZwTable
            ref="tableRef"
            class="table-box"
            :option="tableOption"
            :row-key="getRowKey"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()"></ZwTable>
    </div>

    <!-- 分页 -->
</template>
<script setup lang="tsx">
import { onMounted, computed, watch, ref, reactive, toRefs, nextTick } from 'vue';
import { useStore } from '@/store';
import { storeList, sourceList, getRetailOnlinemall } from '@/api/retailOnlineRetailers/onlineRetailers';
import { getOrderState } from '@/api/ecommerce/tradingManage';
import router from '@/router';
import { deepCopy } from '@/utils/helper';
import { useRoute } from 'vue-router';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
const store = useStore();
const shopList = ref([]);
const orderList = ref([]);
const retailList = ref([]);
const route = useRoute();
const tableRef: any = ref(null);

const props = defineProps(['source_type']);

const formData = reactive({
    shop: '',
    source: '',
    order_time: [],
    source_type: props.source_type, //订单类型 1-零售电商 2-达人订单
    page: 1,
    page_size: 15
});

const defaultParams = reactive({
    cust_id: route.query.id,
    shop: '',
    source: [],
    source_type: props.source_type, //订单类型 1-零售电商 2-达人订单
    order_time: []
});
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const getRowKey = (row: any) => {
    return row.id;
};
const searchOption = computed(() => {
    return [
        {
            label: '归属店铺',
            name: 'shop',
            value: '',
            type: 'select',
            placeholder: '请选择店铺',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve(shopList.value);
                });
            },
            formatOption: (v: { name: any; id: any }) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '订单来源',
            name: 'source',
            value: '',
            type: 'select',
            placeholder: '请选择订单来源',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve(orderList.value);
                });
            },
            formatOption: (v: { name: any; id: any }) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '下单时间',
            name: 'order_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间'
        },
        {
            label: '订单状态',
            name: 'status',
            value: '',
            type: 'select',
            placeholder: '请选择订单状态',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    getOrderState().then((res: any) => {
                        const targetArr: any = [];
                        res[0].state_list.map((item: any) => {
                            const obj = {
                                name: item.name,
                                id: item.value
                            };
                            targetArr.push(obj);
                        });
                        resolve(targetArr);
                    });
                });
            },
            formatOption: (v: any): any => ({
                label: v.name,
                value: v.id
            })
        }
    ];
});
const tableOption = [
    {
        prop: 'order_sn',
        label: '订单编号',
        width: 200
    },
    {
        prop: 'source_name',
        label: '订单来源',
        width: 120
    },
    {
        prop: 'status_name',
        label: '订单状态',
        width: 120
    },
    {
        prop: 'account',
        label: '购买账号',
        width: 200,
        showOverflowTooltip: true
    },
    {
        prop: 'account',
        label: '应付/实付金额(元)',
        width: 200,
        render({ row }) {
            return (
                <span>
                    ¥{row.cope_amount || row.cope_amount == 0 ? row.cope_amount : '--'}/
                    {row.actually_amount || row.actually_amount == 0 ? row.actually_amount : '--'}
                </span>
            );
        }
    },
    {
        prop: 'belonging_shop',
        label: '归属店铺'
    },
    {
        prop: 'relation_shop',
        label: '关联门店',
        render({ row }) {
            return <span>{row.relation_shop || '--'}</span>;
        }
    },
    {
        prop: 'work_user',
        label: '归属员工'
    },
    {
        prop: 'order_time',
        label: '下单时间',
        width: 180
    }
];
const getTableH = () => {
    nextTick(() => {
        tableRef.value.getTableH();
    });
};
const fetchApi = () => {
    // 获取文件列表
    getTableH();
    return getRetailOnlinemall;
};

const search = (data: any) => {
    const res = { ...defaultParams, ...data };
    state.searchParams = deepCopy(res);
};
const reset = (v?: any) => {
    state.searchParams = deepCopy({ ...defaultParams, ...v });
};
// 店铺
const getStoreList = async () => {
    shopList.value = await storeList({});
};
// 来源订单
const getsourceList = async () => {
    const res = await sourceList({ dict_id: 1 });
    orderList.value = res;
};
// 列表
const getRetailList = async () => {
    const params = {
        cust_id: route.query.id,
        shop: formData.shop,
        source: formData.source,
        order_time: formData.order_time,
        page: formData.page,
        page_size: formData.page_size
    };
    const res = await getRetailOnlinemall(params);
    retailList.value = res.data;
    store.dispatch('pageTotal', res.total);
};
onMounted(() => {
    getStoreList();
    getsourceList();
});
</script>
<style scoped lang="scss">
.retailers_box {
    .zw-search-form {
        padding: 16px;
        margin-bottom: 16px;
        background-color: #f9f9f9;
    }
}
</style>
